<template>
  <div class="container">
    <h1>全景视频播放器</h1>
    <div class="player-container">
      <!-- 视频区域 -->
      <div class="video-container" ref="videoElementRef">
        <!-- WebRTC 播放器 -->
        <video v-if="playerMode === 'webrtc'" muted="false" id="video-element" autoplay playsinline></video>

        <!-- WebSocket 播放器 -->
        <video-ws v-if="playerMode === 'websocket' && isWebSocketPlayerActive" id="panorama-video-ws"></video-ws>

        <!-- 播放错误提示 -->
        <div class="error-overlay" v-if="playerError">
          <a-alert type="error" :message="playerError" banner />
        </div>
      </div>

      <!-- 控制面板 -->
      <div class="control-panel">
        <div class="panel-content">
          <div class="control-section">
            <div class="label">视频地址</div>
            <a-input id="stream-url" type="text" v-model:value="streamUrl" placeholder="RTMP, RTSP" />
            <div class="button-group">
              <a-button type="primary" @click="playStream()" :disabled="isPlaying">播放视频</a-button>
              <a-button type="default" @click="stopPlaying()" :disabled="!isPlaying">停止播放</a-button>
            </div>
          </div>

          <!-- 播放模式选择 -->
          <div class="control-section">
            <div class="label">播放模式</div>
            <a-radio-group v-model:value="playerMode" @change="handlePlayerModeChange">
              <a-radio value="webrtc">WebRTC 模式</a-radio>
              <a-radio value="websocket">WebSocket + WebCodecs 模式</a-radio>
            </a-radio-group>
          </div>

          <!-- 视角模式选择 -->
          <div class="control-section">
            <div class="label">视角模式</div>
            <a-select v-model:value="sessionStitchMode" style="width: 100%">
              <a-select-option value="normal">视频融合</a-select-option>
              <a-select-option value="trans">全景拼接</a-select-option>
              <a-select-option value="freeview">自由视角</a-select-option>
            </a-select>
          </div>

          <!-- 会话ID选择 -->
          <div class="control-section">
            <div class="label">会话ID</div>
            <a-radio-group v-model:value="sessionId">
              <a-radio :value="0">0 (自由视角流)</a-radio>
              <a-radio :value="1">1 (拼接全景流)</a-radio>
              <a-radio :value="2">2 (视频融合流)</a-radio>
            </a-radio-group>
          </div>

          <!-- 控制ID -->
          <div class="control-section">
            <div class="label">控制ID</div>
            <a-radio-group v-model:value="controlId">
              <a-radio :value="0">0 (默认)</a-radio>
              <a-radio :value="1">1</a-radio>
            </a-radio-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue'
// 一个一个导入 composables
import { useAuth } from '@/composables/auth/useAuth'
import { useEventWebSocket } from '@/composables/event/useEventWebSocket'
import { useMouseEvents } from '@/composables/event/useMouseEvents'
import { useEventHandling } from '@/composables/event/useEventHandling'
import { usePlayerManager } from '@/composables/player/usePlayerManager'
import { useVisibilityChange } from '@/composables/lifecycle/useVisibilityChange'

const { isPageActive } = useVisibilityChange()

// 认证相关
const { uid, loginUser } = useAuth()

// 会话管理
const sessionId = ref(0)
const controlId = ref(0)
const sessionStitchMode = ref('freeview')

const { sendWebSocketMessage } = useEventWebSocket()

// 事件处理相关
const { handleEvent } = useEventHandling({
  uid,
  sessionId,
  controlId,
  sessionStitchMode,
  sendWebSocketMessage
})

// 鼠标事件相关
const { videoElementRef, initMouseEvents } = useMouseEvents({
  handleEvent,
  sessionStitchMode
})

// 播放器管理
const {
  playerMode,
  isWebSocketPlayerActive,
  streamUrl,
  playerError,
  isPlaying,
  playStream,
  stopPlaying,
  handlePlayerModeChange,
  cleanupPlayers
} = usePlayerManager({ isPageActive, streamUrl: 'rtsp://stream.strba.sk:1935/strba/VYHLAD_JAZERO.stream' })

// 监听会话ID变化，根据会话ID设置视角模式
watch(
  sessionId,
  (newSessionId) => {
    const sessionModeMap = {
      0: 'freeview', // 自由视角
      1: 'trans',    // 全景拼接
      2: 'normal'    // 视频融合
    }
    
    sessionStitchMode.value = sessionModeMap[newSessionId] || 'freeview'

    // 控制ID默认为0
    controlId.value = 0
  },
  { immediate: true }
)

// 初始化登录
loginUser()

onMounted(() => {
  initMouseEvents()
})

onBeforeUnmount(() => {
  cleanupPlayers()
})
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.player-container {
  display: flex;
  width: 100%;
  max-width: 100vw;
  margin-top: 20px;
  justify-content: space-between;
  align-items: stretch;
}

.control-panel {
  width: 300px;
  padding: 15px;
  background-color: #f7f7f7;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  border-left: 1px solid #eee;
}

.panel-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}

.label {
  text-align: left;
  margin-bottom: 8px;
  font-weight: 500;
}

.control-section {
  margin-bottom: 20px;
  text-align: left;
}

.ant-input {
  width: 100%;
  margin-bottom: 15px;
}

.video-container {
  flex: 1;
  height: 600px;
  border: 1px solid #ccc;
  background-color: #000;
  position: relative;
}

video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.button-group {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;

  .ant-btn {
    flex: 1;
    margin-bottom: 0;
  }
}

.error-overlay {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 0 20px;
}
</style>
